
import { createElement } from 'react'
import _ from 'lodash';
import locale from 'antd/es/date-picker/locale/zh_CN';

import 'dayjs/locale/zh-cn';
import {
    Input, 
    InputNumber, 
    Select,
    Radio, 
    Cascader,
    Checkbox, 
    DatePicker,
    Slider,
    Switch, 
    TreeSelect,
    Upload,
    Form,
    Button,
    Modal ,
    Image
} from 'antd'
const FormItem = Form.Item, { Password ,TextArea} = Input,{RangePicker } =DatePicker,  h = createElement;
export interface OptionType {
    value:string|number
    label:string
}
// 表单域组件类型
export const ComponentsMap = {
    Text: (componentProps:any ) => h(Input,{...componentProps} ),
    Textarea: (componentProps:any ) => h(TextArea,{...componentProps} ),
    Password: (componentProps:any ) => h(Password, {...componentProps}),
    InputNumber: (componentProps:any ) => h(InputNumber, {...componentProps}),
    // Select:(componentProps:any ) => h(Select, {...componentProps}, componentProps?.options.map((c:OptionType) => h(Select.Option, {key: c.value, value: c.value}, c.label))),
    Select:(componentProps:any ) => h(Select, {...componentProps}),
    Radio:(componentProps:any ) => h(Radio.Group,{...componentProps},_.map(componentProps?.options,(c:OptionType)=>h(Radio,{key:c.value,value:c.value},c.label))),
    Checkbox:(componentProps:any ) => h(Checkbox.Group,{...componentProps},_.map(componentProps?.options,(c:OptionType)=>h(Checkbox,{key:c.value,value:c.value},c.label))),
    DatePicker:(componentProps:any ) => h(DatePicker, {locale,...componentProps}), //<DatePicker ...componentProps />,
    RangePicker:(componentProps:any ) => h(RangePicker, {locale,...componentProps}), //<DatePicker ...componentProps />,
    Cascader: (componentProps:any ) => h(Cascader, {...componentProps}), //<Cascader ...componentProps />,
    Slider: (componentProps:any ) => h(Slider, {...componentProps}), //<Slider ...componentProps />,
    Switch: (componentProps:any ) => h(Switch, {...componentProps}), //<Switch ...componentProps />,
    TreeSelect: (componentProps:any ) => h(TreeSelect, {...componentProps},_.map(componentProps?.options,(c:OptionType)=>h(TreeSelect.Option,{key:c.value,value:c.value},c.label))), // <TreeSelect ...componentProps>
    Upload: (componentProps:any ) => h(Upload, {...componentProps}, _.map(componentProps?.children,(c:any)=>ComponentsMap[c.component](c.componentProps))),   // <Upload ...componentProps />,
    Button:(componentProps:any ) => h(Button, {...componentProps},componentProps.value),
    Modal: (componentProps:any ) => h(Modal, {...componentProps}, _.map(componentProps?.children,(c:any)=>ComponentsMap[c.component](c.componentProps))),   // <Modal ...componentProps />,
    Image:(componentProps:any ) => h(Image, {...componentProps},componentProps.value),
    
}
